<template>
  <div class="flex flex-col gap-3 flex-1">
    <!-- 顶部统计卡片 -->
    <div class="grid grid-cols-4 gap-3 bg-white p-3 rounded-lg">
      <el-card v-for="stat in statistics" :key="stat.label" shadow="hover">
        <div class="flex items-center justify-between">
          <div class="flex flex-col">
            <span class="text-gray-500 text-sm">{{ stat.label }}</span>
            <span class="text-2xl font-bold mt-2" :class="stat.color">{{ stat.value }}</span>
          </div>
          <el-icon :size="40" :class="stat.iconColor">
            <component :is="stat.icon" />
          </el-icon>
        </div>
      </el-card>
    </div>

    <!-- 主要内容区域 -->
    <div class="bg-white p-3 rounded-lg">
        <el-tabs v-model="activeTab" class="flex-1">
            <!-- 预约提醒设置 -->
            <el-tab-pane label="提醒设置" name="reminder">
              <div class="bg-white rounded-lg">
                <div class="flex justify-between py-1">
                  <div class="text-lg font-bold">提醒方式设置</div>
                  <el-button type="primary" @click="handleSaveSettings">保存设置</el-button>
                </div>      
                <el-form :model="reminderSettings" label-width="120px">
                  <el-form-item label="提醒时间">
                    <div class="flex items-center gap-2">
                      <el-input-number v-model="reminderSettings.beforeHours" :min="1" :max="72" />
                      <span class="text-gray-500">小时前</span>
                    </div>
                  </el-form-item>
                  
                  <el-form-item label="提醒方式">
                    <el-checkbox-group v-model="reminderSettings.methods">
                      <el-checkbox value="sms">短信提醒</el-checkbox>
                      <el-checkbox value="app">APP推送</el-checkbox>
                      <el-checkbox value="wechat">微信提醒</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
      
                  <el-form-item label="提醒模板">
                    <el-input
                      v-model="reminderSettings.template"
                      type="textarea"
                      :rows="4"
                      placeholder="可使用以下变量：{患者姓名}、{就诊时间}、{科室}、{医生}、{序号}"
                    />
                  </el-form-item>
                </el-form>
              </div>
      
              <div class="bg-white rounded-lg">
                <div class="flex justify-between mb-3">
                  <div class="text-lg font-bold">待发送提醒</div>
                  <el-button type="success" @click="handleSendReminders">立即发送</el-button>
                </div>
      
                <el-table :data="pendingReminders" border stripe>
                  <el-table-column prop="patientName" label="患者姓名" />
                  <el-table-column prop="appointmentTime" label="就诊时间" />
                  <el-table-column prop="department" label="就诊科室" />
                  <el-table-column prop="doctor" label="主治医生" />
                  <el-table-column prop="reminderTime" label="预计提醒时间" />
                  <el-table-column prop="status" label="状态">
                    <template #default="{ row }">
                      <el-tag :type="getReminderStatusType(row.status)">
                        {{ getReminderStatusLabel(row.status) }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150" fixed="right">
                    <template #default="{ row }">
                      <el-button type="primary" link @click="handleSendSingleReminder(row)">
                        发送
                      </el-button>
                      <el-button type="warning" link @click="handleCancelReminder(row)">
                        取消
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
      
            <!-- 预约变更记录 -->
            <el-tab-pane label="变更记录" name="changes">
              <div class="bg-white p-4 rounded-lg">
                <!-- 搜索栏 -->
                <div class="flex gap-4 mb-4">
                  <el-input
                    v-model="searchForm.keyword"
                    placeholder="搜索患者姓名/手机号"
                    class="w-60"
                  >
                    <template #prefix>
                      <el-icon><Search /></el-icon>
                    </template>
                  </el-input>
                  <el-select v-model="searchForm.type" placeholder="变更类型" class="w-40">
                    <el-option label="时间变更" value="time" />
                    <el-option label="取消预约" value="cancel" />
                  </el-select>
                  <el-date-picker
                    v-model="searchForm.dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                  <el-button type="primary" @click="handleSearch">搜索</el-button>
                  <el-button @click="handleReset">重置</el-button>
                </div>
      
                <el-table :data="changeRecords" border stripe>
                  <el-table-column prop="patientName" label="患者姓名" />
                  <el-table-column prop="phone" label="手机号" />
                  <el-table-column prop="department" label="就诊科室" />
                  <el-table-column prop="doctor" label="主治医生" />
                  <el-table-column prop="type" label="变更类型">
                    <template #default="{ row }">
                      <el-tag :type="row.type === 'time' ? 'warning' : 'danger'">
                        {{ row.type === 'time' ? '时间变更' : '取消预约' }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="变更时间" />
                  <el-table-column prop="status" label="状态">
                    <template #default="{ row }">
                      <el-tag :type="getChangeStatusType(row.status)">
                        {{ getChangeStatusLabel(row.status) }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150" fixed="right">
                    <template #default="{ row }">
                      <el-button 
                        v-if="row.status === 'pending'"
                        type="primary" 
                        link 
                        @click="handleApproveChange(row)"
                      >
                        审核
                      </el-button>
                      <el-button type="primary" link @click="handleViewDetail(row)">
                        详情
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    
    <!-- 详情 -->
    <Drawer
      v-model="showDetailDialog"
      title="详情"
      size="40%"
      :is-show-confirm="false"
    >
    <div>
      <el-descriptions class="margin-top" title="" :column="3" :size="size" border>
        <el-descriptions-item label="患者姓名">
          {{ detailChange?.patientName }}
        </el-descriptions-item>
        <el-descriptions-item label="就诊科室">
          {{  detailChange?.department }}
        </el-descriptions-item>
        <el-descriptions-item label="主治医生">
          {{ detailChange?.doctor }}
        </el-descriptions-item>
        <el-descriptions-item label="原就诊时间">
          {{ detailChange?.originalTime }}
        </el-descriptions-item>
        <el-descriptions-item label="新就诊时间">
          {{ detailChange?.newTime }}
        </el-descriptions-item>
        <el-descriptions-item label="变更原因">
          {{ detailChange?.reason }}
        </el-descriptions-item>
        <el-descriptions-item label="处理人">
          {{ detailChange?.operator }}
        </el-descriptions-item>
        <el-descriptions-item label="变更时间">
          {{ detailChange?.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="变更状态">
          {{ detailChange?.status }}
        </el-descriptions-item>
        <el-descriptions-item label="审核结果">
          {{ detailChange?.approveResult }}
        </el-descriptions-item>
        <el-descriptions-item label="审核备注">
          {{ detailChange?.approveRemark }}
        </el-descriptions-item>
        <el-descriptions-item label="审核时间">
          {{ detailChange?.approveTime }}
        </el-descriptions-item>
        <el-descriptions-item label="审核人">
          {{ detailChange?.approveOperator }}
        </el-descriptions-item>
      </el-descriptions>
    </div>  
  </Drawer>
    <!-- 变更审核对话框 -->
    <Drawer
      v-model="showApproveDialog"
      :title="editingChange?.type === 'time' ? '审核时间变更' : '审核取消预约'"
      size="40%"
      @confirm="sureApprove"
    >
      <el-form :model="editingChange" label-width="100px">
        <el-form-item label="患者姓名">
          {{ editingChange?.patientName }}
        </el-form-item>
        <el-form-item label="就诊科室">
          {{ editingChange?.department }}
        </el-form-item>
        <el-form-item label="主治医生">
          {{ editingChange?.doctor }}
        </el-form-item>
        <el-form-item label="原就诊时间">
          {{ editingChange?.originalTime }}
        </el-form-item>
        <el-form-item v-if="editingChange?.type === 'time'" label="新就诊时间">
          {{ editingChange?.newTime }}
        </el-form-item>
        <el-form-item label="变更原因">
          {{ editingChange?.reason }}
        </el-form-item>
        <el-form-item label="审核结果">
          <el-radio-group v-model="approveForm.result">
            <el-radio :value="'approve'">通过</el-radio>
            <el-radio :value="'reject'">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核备注">
          <el-input
            v-model="approveForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入审核意见"
          />
        </el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Bell, Calendar, Timer, Document } from '@element-plus/icons-vue'
import Drawer from '@/components/common/Drawer.vue'
import { ElMessageBox } from 'element-plus'
// 页面状态
const activeTab = ref('reminder')
const searchForm = ref({
  keyword: '',
  type: '',
  dateRange: []
})

// 统计数据
const statistics = ref([
  {
    label: '今日待提醒',
    value: '128',
    icon: 'Bell',
    color: 'text-blue-500',
    iconColor: 'text-blue-200'
  },
  {
    label: '已发送提醒',
    value: '256',
    icon: 'Timer',
    color: 'text-green-500',
    iconColor: 'text-green-200'
  },
  {
    label: '待审核变更',
    value: '12',
    icon: 'Calendar',
    color: 'text-orange-500',
    iconColor: 'text-orange-200'
  },
  {
    label: '今日变更',
    value: '36',
    icon: 'Document',
    color: 'text-purple-500',
    iconColor: 'text-purple-200'
  }
])

// 提醒设置
const reminderSettings = ref({
  beforeHours: 24,
  methods: ['sms', 'app'],
  template: '尊敬的{患者姓名}，提醒您于{就诊时间}在{科室}就诊，主治医生：{医生}，序号：{序号}'
})

// 待发送提醒
const pendingReminders = ref([
  {
    id: '1',
    patientName: '张三',
    appointmentTime: '2024-03-20 09:30',
    department: '内科',
    doctor: '李医生',
    reminderTime: '2024-03-19 09:30',
    status: 'pending'
  }
])

// 变更记录
const changeRecords = ref([
  {
    id: '1',
    patientName: '李四',
    phone: '13800138000',
    department: '外科',
    doctor: '王医生',
    type: 'time',
    originalTime: '2024-03-18 14:30',
    newTime: '2024-03-19 15:30',
    reason: '临时有事',
    operator: '张护士',
    createTime: '2024-03-17 10:20',
    status: 'pending'
  }
])

// 编辑状态
const showApproveDialog = ref(false)
const editingChange = ref(null)
const approveForm = ref({
  result: 'approve',
  remark: ''
})

// 状态处理函数
const getReminderStatusType = (status) => {
  const types = {
    pending: 'warning',
    sent: 'success',
    failed: 'danger'
  }
  return types[status]
}

const getReminderStatusLabel = (status) => {
  const labels = {
    pending: '待发送',
    sent: '已发送',
    failed: '发送失败'
  }
  return labels[status]
}

const getChangeStatusType = (status) => {
  const types = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return types[status]
}

const getChangeStatusLabel = (status) => {
  const labels = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return labels[status]
}

// 提醒相关方法
const handleSaveSettings = () => {
  ElMessage.success('设置保存成功')
}

const handleSendReminders = () => {
  ElMessage.success('提醒发送任务已创建')
}

const handleSendSingleReminder = (row) => {
  ElMessage.success(`已发送提醒给患者${row.patientName}`)
}

const handleCancelReminder = (row) => {
  ElMessageBox.confirm('确定取消该提醒吗？', '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('提醒已取消')
  })
}

// 变更记录相关方法
const handleSearch = () => {
  ElMessage.success('搜索功能待实现')
}

const handleReset = () => {
  searchForm.value = {
    keyword: '',
    type: '',
    dateRange: []
  }
}

const handleApproveChange = (row) => {
  editingChange.value = row
  showApproveDialog.value = true
}

const sureApprove = () => {
  ElMessage.success('审核成功')
  showApproveDialog.value = false
}
// 详情
const showDetailDialog = ref(false)
const detailChange = ref(null)
const handleViewDetail = (row) => {
  detailChange.value = row
  showDetailDialog.value = true
}


</script>